<template>
	<view class="container" :style="appThemeStyle">
		<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption"
		  @up="upCallback">
		  <!-- 用户列表 -->
		  <view class="order-list">
		    <view class="order-item" v-for="(item, index) in list.data" :key="index">
		      <view class="item-top">
		        <view class="item-top-left">
		          <text class="order-time">用户ID：{{item.user_id}}</text>
		        </view>
		        <view class="item-top-right">
		          <text class="state-text">{{ happenTimeFun(item.last_login_time) }}</text>
		        </view>
		      </view>
		      <view class="goods-list">
		        <view class="goods-item">
		          <!-- 用户label -->
		          <view class="goods-content">
		            <view class="goods-title"><text class="twoline-hide">用户昵称</text></view>
					<view class="goods-title"><text class="twoline-hide">手机号</text></view>
					<view class="goods-title"><text class="twoline-hide">余额</text></view>
					<view class="goods-title"><text class="twoline-hide">性别</text></view>
					<view class="goods-title"><text class="twoline-hide">地址</text></view>
		          </view>
		          <!-- 用户信息 -->
		          <view class="goods-trade">
		            <view class="goods-price">
		              <text class="value">{{item.nick_name}}</text>
		            </view>
		            <view class="goods-price">
		              <text class="value">{{item.mobile}}</text>
		            </view>
					<view class="goods-price">
					  <text class="value">{{item.balance}}</text>
					</view>
					<view class="goods-price">
					  <text class="value">{{item.gender}}</text>
					</view>
					<view class="goods-price">
					  <text class="value">{{item.province || '-'}}{{item.city || '-'}}</text>
					</view>
		          </view>
		        </view>
		      </view>
		    </view>
		  </view>
		</mescroll-body>
	</view>
</template>

<script>
	  import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
	  import * as UserApi from '@/api/user'
	  import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
	  // 每页记录数量
	  const pageSize = 15
	  export default {
		  mixins: [MescrollMixin],
	    components: {
	    },
	    data() {
	      return {
			  // 订单列表数据
			  list: {
				  data: []
			  },
			  
			  // 上拉加载配置
			  upOption: {
			    // 首次自动执行
			    auto: true,
			    // 每页数据的数量; 默认10
			    page: { size: pageSize },
			    // 数量要大于4条才显示无更多数据
			    noMoreSize: 4,
			    // 空布局
			    empty: {
			      tip: '亲，暂无直推用户'
			    }
			  },
			  canReset:false
		  }
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onLoad(options) {
			// 注册全局事件订阅: 是否刷新订单列表
			uni.$on('syncRefresh2', canReset => {
			  this.canReset = canReset
			})
		},
		
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow(options) {
			this.canReset && this.onRefreshList()
			this.canReset = false
		},
		
		/**
		 * 生命周期函数--监听页面的卸载
		 */
		onUnload() {
		  // 卸载全局事件订阅
		  uni.$off('syncRefresh2')
		},
		methods: {
			/**
			 * 上拉加载的回调 (页面初始化时也会执行一次)
			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
			 * @param {Object} page
			 */
			upCallback(page) {
			  console.log(page)
			  const app = this
			  // 设置列表数据
			  app.getOrderList().then(list => {
					console.log(list)
					app.list.data = list
					const curPageLen = list.length
					const totalSize = list.length
			       app.mescroll.endBySize(curPageLen, totalSize)
			  })
			  .catch(() => app.mescroll.endErr())
			},
			
			// 获取订单列表
			getOrderList(pageNo = 1) {
			  const app = this
			  console.log(pageNo)
			  return new Promise((resolve, reject) => {
			    UserApi.directUsers({ }, { load: false })
			      .then(result => {
			        // 合并新数据
			        console.log(result.data)
			        resolve(result.data)
			      })
			  })
			},
			// 刷新订单列表
			onRefreshList() {
			  this.list = getEmptyPaginateObj()
			  setTimeout(() => {
			    this.mescroll.resetUpScroll()
			  }, 120)
			},
			happenTimeFun(num){//时间戳数据处理
				if(num) {
					if(num && String(num).length <= 10) {
						num = num *1000
					}
					let date = new Date(num);		
					//时间戳为10位需*1000，时间戳为13位的话不需乘1000			
			        let y = date.getFullYear();			
			        let MM = date.getMonth() + 1;			
			        MM = MM < 10 ? ('0' + MM) : MM;//月补0			
			        let d = date.getDate();			
			        d = d < 10 ? ('0' + d) : d;//天补0			
			        let h = date.getHours();			
			        h = h < 10 ? ('0' + h) : h;//小时补0			
			        let m = date.getMinutes();			
			        m = m < 10 ? ('0' + m) : m;//分钟补0			
			        let s = date.getSeconds();			
			        s = s < 10 ? ('0' + s) : s;//秒补0			
			        return y + '-' + MM + '-' + d + ' ' + h + ':' + m+ ':' + s;
				} else {
					return ''
				}
			},
		}
	  }
</script>

<style lang="scss" scoped>
  // 项目内容
  .order-item {
    margin: 20rpx auto 20rpx auto;
    padding: 30rpx 30rpx;
    width: 94%;
    box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
    border-radius: 16rpx;
    background: #fff;
  }

  // 项目顶部
  .item-top {
    display: flex;
    justify-content: space-between;
    font-size: 26rpx;
    margin-bottom: 16rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #eee;

    .order-time {
      color: #777;
    }

    .state-text {
      color: $main-bg;
    }
  }

  // 商品列表
  .goods-list {

    // 商品项
    .goods-item {
      display: flex;

      // 商品内容
      .goods-content {
        flex: 0.3;
        padding-top: 16rpx;

        .goods-title {
          font-size: 26rpx;
          max-height: 76rpx;
		  margin-bottom: 25rpx;
		  line-height: 40rpx;
        }
      }

      // 交易信息
      .goods-trade {
        padding-top: 16rpx;
        width: 150rpx;
        text-align: left;
        color: $uni-text-color-grey;
        font-size: 26rpx;
        flex: 1;
        .goods-price {
          vertical-align: bottom;
          margin-bottom: 25rpx;
		  line-height: 40rpx;
        }
      }

    }

  }

  // 订单操作
  .order-handle {
    .btn-group {

      .btn-item {
        border-radius: 10rpx;
        padding: 8rpx 20rpx;
        margin-left: 15rpx;
        font-size: 26rpx;
        float: right;
        color: #383838;
        border: 1rpx solid #a8a8a8;

        &:last-child {
          margin-left: 0;
        }

        &.active {
          color: $main-bg;
          border: 1rpx solid $main-bg;
        }
      }

    }

  }

</style>